<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮组</title>
    <meta name="keywords" content="按钮组">
    <meta name="description" content="按钮组">
    <link rel="stylesheet" href="./btn-group.css">
</head>
<body>
<div class="vr-container">
    <div id="open-btn" class="open-btn">开/关弹框</div>
    <div class="vr-wrapper">
        <img src="https://www.qiyou.cn/static/specials/images/gears5_subject_bg1.jpg" alt="">
    </div>
    <div id="btn-modal" class="btn-modal">
        <div class="header">
            <span>细节调整</span>
            <div id="close" class="close"></div>
        </div>
        <div class="panel panel1">
            <div class="title">
                平移
            </div>
            <div class="panel-wrapper">
                <div id="up" class="item up">
                    <div class="name">上移</div>
                    <div class="icon"></div>
                </div>
                <div id="right" class="item right">
                    <div class="icon"></div>
                    <div class="name">右移</div>
                </div>
                <div id="down" class="item down">
                    <div class="icon"></div>
                    <div class="name">下移</div>
                </div>
                <div id="left" class="item left">
                    <div class="name">左移</div>
                    <div class="icon"></div>
                </div>
                <div class="center">
                    <img src="../images/center.png" alt="">
                </div>
            </div>
        </div>
        <div class="panel panel2">
            <div class="title">
                旋转
            </div>
            <div class="panel-wrapper">
                <div class="panel-btn-group">
                    <div id="spin-1" class="btn btn1"></div>
                    <div id="spin-2" class="btn btn2"></div>
                    <div id="spin-3" class="btn btn3"></div>
                    <div id="spin-4" class="btn btn4"></div>
                    <div id="spin-5" class="btn btn5"></div>
                    <div id="spin-6" class="btn btn6"></div>
                </div>
            </div>
        </div>
        <div class="panel panel3">
            <div class="panel-wrapper">
                <div id="add" class="btn btn-add">
                    <div class="icon"></div>
                    <span>放大</span>
                </div>
                <div id="reduce" class="btn btn-reduce">
                    <div class="icon"></div>
                    <span>缩小</span>
                </div>
            </div>
        </div>
        <div class="panel panel4">
            <div id="save" class="btn save">
                保存
            </div>
            <div id="delete" class="btn del">
                删除
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="btn-group.js"></script>
</body>
</html>
